<template>
  <div class="map-chart">
    <div class="chart-title">{{ title }}</div>
    <div class="map-container">
      <div ref="myChart" class="map-chart-content"></div>
      <div class="map-legend">
        <div class="legend-item" v-for="item in legendData" :key="item.name">
          <div class="legend-dot" :style="{ backgroundColor: item.color }"></div>
          <span class="legend-text">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="map-stats">
      <div class="stat-item" v-for="stat in statsData" :key="stat.label">
        <div class="stat-value">{{ stat.value }}</div>
        <div class="stat-label">{{ stat.label }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import chinaMap from '@/assets/json/china.json'

export default {
  name: 'MapChart',
  props: {
    title: {
      type: String,
      default: '地理分布图'
    },
    mapData: {
      type: Array,
      default: () => [
        { name: '北京', value: [116.46, 39.92, 95], level: 'high' },
        { name: '上海', value: [121.48, 31.22, 88], level: 'high' },
        { name: '广州', value: [113.23, 23.16, 82], level: 'high' },
        { name: '深圳', value: [114.07, 22.62, 78], level: 'high' },
        { name: '杭州', value: [120.19, 30.26, 75], level: 'medium' },
        { name: '南京', value: [118.78, 32.04, 72], level: 'medium' },
        { name: '成都', value: [104.06, 30.67, 68], level: 'medium' },
        { name: '武汉', value: [114.31, 30.52, 65], level: 'medium' },
        { name: '西安', value: [108.95, 34.27, 58], level: 'low' },
        { name: '重庆', value: [106.54, 29.59, 55], level: 'low' }
      ]
    }
  },
  data() {
    return {
      chart: null,
      legendData: [
        { name: '高活跃度', color: '#ff6b6b' },
        { name: '中活跃度', color: '#ffd93d' },
        { name: '低活跃度', color: '#00d4ff' }
      ],
      statsData: [
        { label: '总城市数', value: '10' },
        { label: '平均活跃度', value: '72.6%' },
        { label: '最高活跃度', value: '95%' },
        { label: '最低活跃度', value: '55%' }
      ],
      option: {
        geo: {
          show: true,
          type: 'map',
          map: 'china',
          roam: true, // 开启缩放和平移
          zoom: 1.2,
          center: [105, 36], // 地图中心点
          label: {
            show: false,
            color: '#fff',
            fontSize: 12
          },
          itemStyle: {
            areaColor: 'rgba(51, 82, 199, 0.8)',
            borderColor: 'rgba(0, 212, 255, 0.6)',
            borderWidth: 1
          },
          emphasis: {
            label: {
              show: true,
              color: '#fff',
              fontSize: 14
            },
            itemStyle: {
              areaColor: 'rgba(0, 212, 255, 0.3)',
              borderColor: '#00d4ff',
              borderWidth: 2
            }
          }
        },
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              period: 3,
              brushType: 'stroke',
              scale: 4
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{b}',
              color: '#fff',
              fontSize: 12
            },
            itemStyle: {
              color: function(params) {
                const level = params.data.level
                const colorMap = {
                  'high': '#ff6b6b',
                  'medium': '#ffd93d',
                  'low': '#00d4ff'
                }
                return colorMap[level] || '#00d4ff'
              },
              shadowBlur: 10,
              shadowColor: function(params) {
                const level = params.data.level
                const colorMap = {
                  'high': 'rgba(255, 107, 107, 0.5)',
                  'medium': 'rgba(255, 217, 61, 0.5)',
                  'low': 'rgba(0, 212, 255, 0.5)'
                }
                return colorMap[level] || 'rgba(0, 212, 255, 0.5)'
              }
            },
            symbol: 'circle',
            symbolSize: function (val) {
              return Math.max(8, val[2] / 5)
            },
            data: this.mapData
          }
        ]
      }
    }
  },
  mounted() {
    this.init()
    this.startDataUpdate()
    this.bindResizeEvent()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
    if (this.updateTimer) {
      clearInterval(this.updateTimer)
    }
    this.unbindResizeEvent()
  },
  methods: {
    init() {
      this.chart = echarts.init(this.$refs.myChart)
      echarts.registerMap('china', chinaMap)
      this.chart.setOption(this.option)
      
      // 添加点击事件
      this.chart.on('click', (params) => {
        if (params.componentType === 'series') {
          this.$emit('city-click', params.data)
        }
      })
    },
    startDataUpdate() {
      // 模拟实时数据更新
      this.updateTimer = setInterval(() => {
        this.updateMapData()
      }, 5000)
    },
    updateMapData() {
      // 随机更新一些城市的数据
      const updatedData = this.mapData.map(item => ({
        ...item,
        value: [
          item.value[0],
          item.value[1],
          Math.max(10, Math.min(100, item.value[2] + (Math.random() - 0.5) * 10))
        ]
      }))
      
      this.option.series[0].data = updatedData
      if (this.chart) {
        this.chart.setOption(this.option)
      }
    },
    resize() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    bindResizeEvent() {
      this.handleResize = () => {
        this.resize()
      }
      window.addEventListener('chart-resize', this.handleResize)
      window.addEventListener('resize', this.handleResize)
    },
    unbindResizeEvent() {
      if (this.handleResize) {
        window.removeEventListener('chart-resize', this.handleResize)
        window.removeEventListener('resize', this.handleResize)
      }
    }
  }
}
</script>

<style scoped>
.map-chart {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.chart-title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.map-container {
  flex: 1;
  display: flex;
  gap: 20px;
  position: relative;
}

.map-chart-content {
  flex: 1;
  height: 100%;
  min-height: 300px;
}

.map-legend {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.legend-item:last-child {
  margin-bottom: 0;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.legend-text {
  color: #fff;
  font-size: 12px;
}

.map-stats {
  display: flex;
  gap: 20px;
  margin-top: 15px;
  justify-content: center;
}

.stat-item {
  text-align: center;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  min-width: 80px;
}

.stat-value {
  color: #00d4ff;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .map-container {
    flex-direction: column;
  }
  
  .map-legend {
    position: static;
    margin-top: 10px;
  }
  
  .map-stats {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .stat-item {
    min-width: 70px;
    padding: 8px 12px;
  }
}
</style>